<template>
  <div v-loading="loading">
    <h1>审核人信息管理</h1>
    <div style="height:30px">
      <el-input v-model="Fname" placeholder="输入审核人名称" style="width:200px;float:left;margin-right:10px" size="mini"></el-input>
      <el-button size="mini" @click="findByName" style="float:left" icon="el-icon-search">查询</el-button>
      <el-button size="mini" @click="addPE" style="float:left" type="primary" icon="el-icon-plus">新增</el-button>
    </div>
    <div style="margin-top:10px">
      <el-table :data="tableData" style="width: 100%" border stripe size="mini" @selection-change="handleSelectionChange"> 
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="audit_manager_id" label="加班审核人id" v-if="false"></el-table-column>
        <el-table-column prop="user_id" label="用户id" v-if="false"></el-table-column>
        <el-table-column prop="user_name" label="审核人名称" align="left"></el-table-column>
        <el-table-column prop="audit_manager_duty" label="审核人职务" align="center"></el-table-column>
        <el-table-column prop="edit" label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" icon="el-icon-edit" @click="showEditePE(scope.row)"  type="primary">
              编辑
            </el-button>
            <el-button size="mini" icon="el-icon-delete" @click="deletePE(scope.row)" type="danger">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="height:40px;margin-top:10px">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total.length" style="float:left">
        </el-pagination>
    </div>
    <div style="margin-top:10px">
      <el-button size="mini" @click="toDeletePES" type="danger" style="float:left" v-if="tableData.length>0" :disabled="multipleSelection.length==0">批量删除</el-button>
    </div>
    <el-dialog title="编辑"
          :visible.sync="dialogVisible"
          width="25%" float="left">
      <div v-show="addOrEdit" style="margin-left:-29px">
        <span>审核人所在部门</span>
        <el-select v-model="Dep" style="width: 200px" placeholder="请选择" size="mini" @change="change">
              <el-option
                v-for="item in allDeps"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
      </div>
      <div style="margin-top: 10px">
        <span style="color:red">*</span><span>审核人名称</span>
        <el-select v-model="name" style="width: 200px" placeholder="请选择" size="mini" @change="userChange">
              <el-option
                v-for="item in allUser"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
      </div>
      <div v-if="requery" style="margin-top:3px;margin-left:-38px">
        <span style="color:red;font-size:13px">{{msg}}</span>
      </div>
      <el-input v-model="PEname" v-show="false"></el-input>
      <!-- <div style="margin-top: 10px">
        <span style="color:red">*</span><span>审核人职务</span>
        <el-select v-model="duty" style="width: 200px" placeholder="请选择" size="mini" @change="dutyChange">
              <el-option
                v-for="item in allDuty"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
        </el-select>
      </div> -->
      <el-input v-model="dutyName" v-show="false"></el-input>
      <div>
        <el-input v-model="userid" v-show="false"></el-input>
        <el-input v-model="managerid" v-show="false"></el-input>
      </div>
      <div v-if="requery1" style="margin-top:3px;margin-left:-13px">
        <span style="color:red;font-size:13px">{{msg1}}</span>
      </div>
      <div style="margin-top: 10px">
        <el-button @click="edit" size="small" v-show="editShow"  type="primary">保存</el-button>
        <el-button @click="save" size="small" v-show="saveShow"  type="primary">保存</el-button>
        <el-button @click="close" size="small" type="danger">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default{
    data(){
      return{
        total:'',
        requery:false,
        msg:'',
        requery1:false,
        msg1:'',
        currentPage:1,
        pagesize:10,
        multipleSelection: [],
        dutyName:'',
        PEname:'',
        saveShow:false,
        editShow:false,
        Fname:'',
        allUser:[],
        Dep:'',
        addOrEdit:false,
        allDeps:[],
        name:'',
        duty:'',
        userid:'',
        managerid:'',
        allDuty:[],
        dialogVisible: false,
        tableData:[],
        loading:false,
      }
    },
    mounted:function(){
      this.loadTableData(true);
    },
    methods: {
      // 加载表格
      loadTableData(data){
       if(data){
         this.loadTotal();
       }
        var _this = this;
        this.loading = true;
        this.postRequest("/examined/getExamined",{
          start:this.pagesize*(this.currentPage-1),
          pageSize:this.pagesize,
          name:this.Fname
        }).then(resp => {
        this.loading = false;
        if (resp && resp.status == 200) {
          
          _this.tableData = resp.data;
          
        }
      });
      },
      //查询表格总数
      loadTotal(){
        var _this=this;
        this.postRequest("/examined/getExaminedTotal",{
          name : this.Fname
        }).then(resp=>{
          if(resp&&resp.status==200){
            _this.total = resp.data
          }
        })
      },
      // 删除
      deletePE(data){
        this.$confirm('确认删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.loading = true;
                this.postRequest("/examined/deleteExamined",{
                audit_manager_id:data.audit_manager_id
              }).then(resp=>{
                this.loading = false;
                if (resp && resp.status == 200) {
                    var data1 = resp.data;
                    this.$message({type:data1.status,message:data1.msg});
                    this.loadTableData(true);
                    this.close();
                }
              });
            })
        
      },
      // 显示编辑页面并赋值
      showEditePE(data){
        this.requery=false;
        this.requery1=false;
        this.editShow=true;
        this.saveShow=false;
        this.addOrEdit=false;
        this.dialogVisible=true;
        this.name=data.user_name;
        this.duty=data.audit_manager_duty;
        this.userid=data.user_id;
        this.managerid=data.audit_manager_id;
        // this.loadAllDuty();
      },
      //确定编辑
      edit(){
        if(!this.name){
          this.msg='请选择审核人';
          this.requery=true;
          return;
        }
        if(!this.duty){
          this.msg1='请选择审核人职务'
          this.requery1=true;
          return;
        }
        this.postRequest("/examined/editeExamined",{
          audit_manager_duty:this.dutyName,
          user_id:this.userid,
          audit_manager_id:this.managerid
        }).then(resp=>{
          var data = resp.data;
          this.$message({type:data.status,message:data.msg});
          this.loadTableData();
          this.close();
        });
      },
      // 关闭编辑页面
      close(){
        this.dialogVisible=false;
      },
      // //获取职务下拉选
      // loadAllDuty(){
      //   var _this=this;
      //   this.getRequest("/examined/getDuty").then(resp=>{
      //     _this.allDuty=resp.data;
      //   })
      // },
      //打开新增页面,并未下拉选赋值
      addPE(){
        this.Dep='';
        this.requery=false;
        this.name='';
        this.duty='';
        this.editShow=false;
        this.saveShow=true;
        this.addOrEdit=true;
        this.dialogVisible=true;
        // this.loadAllDuty(); 
        this.loadAllDeps();
      },
      //获取部门下拉
      loadAllDeps(){
        var _this = this;
        this.getRequest("/system/basic/deps").then(resp=> {
          if (resp && resp.status == 200) {
            _this.allDeps = resp.data;
          }
        });
      },
      //根据选择部门获取人员下拉
      change(){
        var _this = this;
        this.postRequest("/examined/getUserByDepno",{
          depno:this.Dep
        }).then(resp=>{
          if (resp && resp.status == 200) {
            _this.allUser = resp.data;
          }
        });
      },
      //条件查询
      findByName(){
        this.pagesize=10;
        this.currentPage=1;
        this.loadTableData(true)
      },
      //新增保存
      save(){
        var _this = this;
        if(!this.name){
          this.msg='请选择审核人';
          this.requery=true;
          return;
        }
        // if(!this.duty){
        //   this.msg1='请选择审核人职务'
        //   this.requery1=true;
        //   return;
        // }
        for(var i=0;i<this.tableData.length;i++){
          if(this.name==this.tableData[i].user_id){
            this.$message({type:'warning',message:'当前审核人已存在'});
            return
          }
        }
        this.loading = true;
        this.postRequest("/examined/addPE",{
          user_name:this.PEname,
          user_id:this.name,
          audit_manager_duty:this.dutyName,
          // user_id:this.
        }).then(resp=>{
          this.loading = false;
          if (resp && resp.status == 200) {
              var data = resp.data;
              this.$message({type:data.status,message:data.msg});
              this.loadTableData(true);
              this.close();
          }
        });
      },
      //选择人员是显示姓名
      userChange(vid){
        if(this.name){
          this.requery=false
        }
        let obj = {};
        obj = this.allUser.find((item)=>{
          return item.id==vid;
        });
        this.PEname = obj.name;
      },
      //选择职务时,显示职务名称
      dutyChange(vid){
        this.requery1=false
        let obj = {};
        obj = this.allDuty.find((item)=>{
          return item.id==vid;
        });
        this.dutyName = obj.name;
      },
      //多选时确定勾选项
      handleSelectionChange(val){
        this.multipleSelection = val;
      },
      //批量删除前置准备
      toDeletePES(){
        var _this = this;
        this.$confirm('删除' + this.multipleSelection.length + '条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var multipleSelection = _this.multipleSelection;
          var ids = '';
          multipleSelection.forEach(row=> {
            ids = ids + row.audit_manager_id + ',';
          })
          _this.deletePEs(ids);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //批量删除
      deletePEs(data){
        this.loading = true;
        this.postRequest("/examined/deletePEs",{
          ids : data
        }).then(resp=>{
          this.loading = false;
          var data1 = resp.data;
          this.$message({type:data1.status,message:data1.msg});
          this.loadTableData();
          this.close();
        })
      },
      handleSizeChange(data){
        this.pagesize = data;
        this.loadTableData();
      },
      handleCurrentChange(data){
        this.currentPage = data;
        this.loadTableData();
      }
    }
  }
</script>